@import"./com";

header{
        
         // 最顶部
    .h_top{
        width: vw(750);
        display: flex;
        justify-content: center;
        justify-items: center;
        margin-top: vw(48);
        text-align: center;
        line-height: vw(50);
       >.h_top1{
           width: vw(705);
           display: flex;
           justify-content: space-between;
           justify-items: center;
        >a >div{
            width: vw(122);
            height: vw(50);
            border: vw(1) solid #ff9344;
            border-radius: vw(10);
            
            font-size: vw(21);
        }
        >span{
            font-size: vw(25);
        }
        .sel {
            position: relative;
            > select {
                width: vw(158);
                height: vw(57);
                border: vw(1) solid #ff9344;
                box-sizing: border-box;
                border-radius: vw(5);
                font-size: vw(26);
                text-indent: vw(17);
                // 去除三角形
                appearance: none;
                outline: none;
            }
            >i{
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                margin-top: vw(-10);
                margin-right: vw(16);
                width: 0;
                height: 0;
                border: vw(20) solid transparent;
                border-top: vw(20) solid #ff9344;
                // 穿透
                pointer-events: none;
            }
        }
       }
    }

        // 搜索框
        >.inp{
            position: relative;
            top: vw(33);
           left: vw(220);
            width: vw(270);
            height: vw(52);
            border: vw(1) solid #ff9344;
            border-radius: vw(26);
            box-sizing: border-box;
            // 搜索框
            &::after{
                content: "";
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background-color: #f2121f;
                background: url(../images/index/搜索矩.png) no-repeat top/cover;
            }
            > input {
                width: vw(183);
                height: vw(34);
                line-height: vw(34);
                font-size: vw(24);
                margin-top: vw(10);
                margin-left: vw(27);
                border: none;
                outline: none;
            }
        }
        
        // 搜索框下面部分
        >.type{
            // position: relative;
            // height: vw(1500);
            margin-top: vw(50);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            >span{
                // position: absolute;
                // top: vw(50);
                font-size: vw(26);
            }

            .type_1{
                margin-top: vw(14);
                width: vw(513);
                height: vw(134);
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                >a{
                width: vw(125);
                height: vw(65);
                color: #8f8f8f;
                background-color: #dcdcdc;
                font-size: vw(19);
                text-align: center;
                line-height: vw(65);
                }
            }
        }
}

main{

    // 热门搜索
    .h_sch{
        display: flex;
        justify-content: space-between;
        margin-top: vw(38);
        >div:first-of-type{
            display: flex;
            margin-left: vw(39);
            
            >img{
                width: vw(34);
                height: vw(45);
                vertical-align: middle;
            }
            >p{
                font-size: vw(29);
                margin-left: vw(24);
                text-align: center;
                line-height: vw(48);
            }
        }
        >div:last-of-type{
            display: flex;
            justify-content: space-around;
            margin-right: vw(21);
            >a{
                font-size: vw(23);
                text-align: center;
                padding-right: vw(8);
                vertical-align: middle;
            }
            >img{
                // vertical-align: middle;
                width: vw(26);
                height: vw(26);
            }
        }
    }

    // 热门搜索图片链接
    .h_sch1{
        width: vw(750);
        margin-top: vw(30);
        // margin-right: vw(20);
        display: flex;
        justify-content: space-around;
        >div:first-of-type{
            >a{
                >img{
                    width: vw(280);
                    height: vw(350);
                }
            }
        }

        >div:last-of-type{
            width: vw(420);
            height: vw(350);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            >a:first-of-type{
                >img{
                width: vw(420);
                height: vw(145);
                }
            }
            >a:nth-of-type(2){
                >img{
                    width: vw(195);
                height: vw(200);
                }
            }
            >a:last-of-type{
                img{
                    width: vw(195);
                height: vw(200);
                }
            }
        }
        
    }

    // 推荐搜索
    .t_sch{
        display: flex;
        justify-content: space-between;
        margin-top: vw(38);
        >div:first-of-type{
            display: flex;
            margin-left: vw(39);
            
            >img{
                width: vw(40);
                height: vw(38);
                vertical-align: middle;
            }
            >p{
                font-size: vw(29);
                margin-left: vw(24);
                text-align: center;
                line-height: vw(48);
            }
        }
        >div:last-of-type{
            display: flex;
            justify-content: space-around;
            margin-right: vw(21);
            >a{
                font-size: vw(23);
                text-align: center;
                padding-right: vw(8);
                vertical-align: middle;
            }
            >img{
                // vertical-align: middle;
                width: vw(26);
                height: vw(26);
            }
        }
    }

    // 推荐搜索图片链接
    .t_sch1{
        margin-top: vw(50);
        display: flex;
        justify-content: space-around;
        >a{
            >img{
                width: vw(230);
                height: vw(200);
            }
        }
    }
}

nav{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    .f_nav{
       

        width: vw(750);
        display: flex;
        justify-content: space-around;
        > div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            > a{
                font-size: vw(24);
                text-align: center;
                img{
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }

    
}
